import { useState, useEffect } from 'react';

/**
 * 自定义Hook: useDebounce
 * 
 * 这个Hook用于对频繁变化的值进行防抖处理，在指定延迟后才返回最新值
 * 防抖是一种常用的性能优化技术，用于减少函数的调用频率
 * 
 * @param {any} value - 需要防抖的值
 * @param {number} delay - 防抖延迟时间（毫秒）
 * @returns {any} - 返回防抖后的值
 * 
 * 使用示例:
 * const [searchTerm, setSearchTerm] = useState('');
 * const debouncedSearchTerm = useDebounce(searchTerm, 500);
 * 
 * // 在组件中使用debouncedSearchTerm而不是searchTerm来触发搜索
 * // 这样只有当用户停止输入500ms后才会执行搜索
 */
function useDebounce(value, delay) {
  // 存储防抖后的值
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // 设置定时器，在指定延迟后更新防抖值
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // 清理函数：如果value或delay改变，或组件卸载，取消之前的定时器
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // 当value或delay改变时重新运行effect

  return debouncedValue;
}

export default useDebounce;